<template>
  <div class="tast-item-box-status mb-20">
    <span :class="['tast-item-status', color]" @click="changeStatus">{{ innerHTML }}</span>
  </div>
</template>
<script>
export default {
  name: "JsxChild",
  props: {
    status: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {};
  },
  computed: {
    innerHTML() {
      return ["未开始", "进行中", "可领取", "已领取"][this.status];
    },
    color() {
      return ["status-no-having", "status-having", "status-completed", "status-terminated"][
        this.status
      ];
    }
  },
  methods: {
    changeStatus() {
      this.$emit("on-status", this.status);
    }
  },
  mounted() {}
};
</script>

<style lang="stylus" scoped>
.tast-item-box-status {
  display: flex
  width: 120px
  height: 36px
  cursor: pointer
}
.tast-item-status {
  border-radius: 4px
  padding: 2px 4px
  box-sizing: border-box
  font-size: 12px
  letter-spacing: 2px
  line-height: 32px
  text-align: center
}
// 未进行
.status-no-having {
  background: rgba(45 140 240, 0.1)
  border: 1px solid #2D8CF0
  color: #2D8CF0
}
// 可领取
.status-completed {
  background: rgba(16, 149, 27, 0.1)
  border: 1px solid #25B14D
  color: #25B14D
}
// 进行中
.status-having {
  background: rgba(255, 144, 0, 0.1)
  border: 1px solid #FF9000
  color: #FF9000
}
// 已领取
.status-terminated {
  background: rgba(255, 35, 12, 0.1)
  border: 1px solid #FF230C
  color: #FF230C
}
</style>
